<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<title>主页</title>
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/idangerous.swiper.css">
<link rel="stylesheet" href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<script src="<%=basePath%>assets/js/idangerous.swiper.min.js"></script>

<style>
body {
	background: #f1f1f1;
	padding-bottom: 1rem;
}
/*顶部固定定位搜索框*/
.sousuo {
	width: 100%;
	height: 0.8rem;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0.6;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

.sousuokuang {
	width: 90%;
	margin: 0.1rem auto;
	position: relative;
	height: 0.6rem;
	border-radius: 4px;
	overflow: hidden;
}

.sousuo-input {
	position: absolute;
	top: 0;
	left: 0;
	height: 0.6rem;
	width: 100%;
}

.sousuo-btn {
	position: absolute;
	top: 0;
	right: 0;
	height: 0.6rem;
	width: 0.6rem;
	outline: none;
	border: none;
    font-size: 0.3rem;
}
/*顶部固定定位搜索框结束*/

.swiper-container {
	height: 3rem;
	width: 100%;
}
.swiper-slide img {
	display: block;
	width: 100% /* position: absolute;top0; */
}

/*大按钮快速导航*/
.nav_fenye {
	width: 100%;
	margin-bottom: 0.05rem;
	background: #fff
}

.nav_fenye ul>li {
	width: 25%;
	padding-bottom: 0.1rem
}

.nav_fenye ul>li>a {
	width: 100%;
	display: block
}

.nav_fenye ul>li>a p {
	font-size: 0.2rem;
	text-align: center;
	font-weight: bold;
	margin-top: -0.1rem;
}
/*大按钮快速导航结束*/

/*第一部分内容*/
.aside-l, .aside-r {
	width: 49.6%;
	background: #fff
}

.aside-title-box {
	border-bottom: 1px solid #f1f1f1;
	padding: 0.1rem 0;
	margin: 0 0.2rem
}

.aside-title {
	font-size: 0.28rem;
	line-height: 0.46rem;
	text-indent: 0.1rem;
	border-left: 0.10rem solid #FF3F25
}

.xinxiliebiao {
	border-bottom: 1px solid #f1f1f1;
	margin: 0 0.2rem;
}

.xinxiliebiao li {
	width: 100%;
	padding: 0.2rem 0 0.2rem 0
}

.xinxiliebiao li a .cong1_l_text {
	width: 63%;
}

.cong1_l_text h4 {
	font-size: 0.2rem;
	font-weight: bold;
	color: #000;
	line-height: 0.35rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cong1_l_text p {
	font-size: 0.18rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 0.4rem
}

.cont1-img {
	width: 33%;
	padding-bottom: 33%;
    background-size: 140%;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
}

.cont1-img img {
	width: 100%;
}

.guanggaotu {
	width: 80%;
	height: 1rem;
	padding: 0 10%
}

.guanggaotu img {
	width: 100%;
	height: 100%
}

/*第二部分内容*/
.cont2 {
	background: #fff;
}

.cont2_title {
	font-size: 0.3rem;
	text-align: center;
	line-height: 0.5rem;
	padding: 0.1rem 0;
}

.cont2_cont li {
	padding: 0.15rem 0rem;
	border-bottom: 1px solid #f1f1f1;
    margin: 0 0.2rem;
}

.cont2-img {
	width: 30%;
	height: 0;
    padding-bottom: 30%;
    background-size: 140%;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cont2_cont li a .cont2_cont_text {
	width: 66%;
    height: 0;
    padding-left: 4%;
    padding-bottom: 30%;
    position: relative;
}

.cont2_cont li a .cont2_cont_text h3 {
	font-size: 0.24rem;
	height: 0.4rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cont2_cont li a .cont2_cont_text p {
	font-size: 12px;
	line-height: 0.3rem
}

.cont2_cont li a .cont2_cont_text i {
	color: red;
	font-size: 0.24rem;
	line-height: 0.3rem
}

.cont2_cont_text_jiequ {
	height: 0.85rem;
}

.cont2_cont li a>p {
	width: 10%
}

.cont2-price {
	height: 0.3rem;
	position: absolute;
    bottom: 0px;
    left: 6%;
    width: 94%;
}

</style>
<style>
/* Demo Syles */
/*body {*/
/*margin: 0;*/
/*font-size: 13px;*/
/*line-height: 1.5;*/
/*}*/
.device {
	width: 100%;
	height: 3.8rem;
	/*padding: 30px 40px;*/
	/*border-radius: 20px;*/
	/*background: #111;*/
	/*border: 3px solid white;*/
	/*margin: 5px auto;*/
	position: relative;
	/*box-shadow: 0px 0px 5px #000;*/
}

.swiper-container {
	height: 3.8rem;
	width: 100%;
}

.pagination {
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 2%;
	width: 100%;
	z-index: 1;
}

.swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	margin: 0 3px;
	cursor: pointer;
}

.swiper-active-switch {
	background: #fff;
}
.home_page a .img{
    display: none;
}
.home_page a .img2{
    display: block;
}
.home_page a p{
    color: #FF3F25;
}
.big-btn-img{
	border-radius: 50%;
	height: 0;
    padding-bottom: 90%;
    background-size: 64%;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
</style>

</head>
<body>
    <!-- 搜索 -->
	<div class="sousuo">
		<div class="sousuokuang">
			<input onclick="window.location.href='<%=basePath%>app/search'" type="text" class="sousuo-input"  readonly="readonly">
			<button type="submit" class="sousuo-btn">
				<i class="fa fa-search"></i>
			</button>
		</div>
	</div>
    <!-- 轮播 -->
	<div class="datulunbo">
		<div class="swiper">
			<div class="device">

				<div class="swiper-container">
					<div class="swiper-wrapper">
						<c:set value="${ fn:split(shufflingInstallInfo.schedulePhoto, ',') }" var="imgList" />
						<c:forEach items="${imgList}" var="img" varStatus="status">
							<div class="swiper-slide">
								<a href="<%=basePath%>${ fn:split(shufflingInstallInfo.photoUrl, ',')[status.index] }">
									<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${img}" alt="">
								</a>
							</div>
						</c:forEach>
					</div>
				</div>
				<div class="pagination"></div>
			</div>
		</div>
	</div>
    <!-- 大按钮快速导航 -->
	<div class="nav_fenye">
		<ul class="clearFirx">
			<li class="float_l">
				<a href="<%=basePath%>jsp/app/snacks.jsp">
				<div class="big-btn-img" style="background-image: url(<%=basePath%>assets/indexImg/lsxc.png);"></div>
					<p>零食小吃</p>
				</a>
			</li>
			<li class="float_l">
				<a href="<%=basePath%>app/getStudentShopList?merchantType=2">
					<div class="big-btn-img" style="background-image: url(<%=basePath%>assets/indexImg/scbl.png);"></div>
					<p>学生店铺</p>
				</a>
			</li>
			<li class="float_l">
				<a href="<%=basePath%>app/getUsedGoodsList">
					<div class="big-btn-img" style="background-image: url(<%=basePath%>assets/indexImg/czes.png);"></div>
					<p>超值二手</p>
				</a>
			</li>
			<li class="float_l">
				<a href="<%=basePath%>app/goodsList?goodsIdentifying=4">
					<div class="big-btn-img" style="background-image: url(<%=basePath%>assets/indexImg/mxzy.png);"></div>
					<p>萌校自营</p>
				</a>
			</li>
		</ul>
	</div>
    <!-- 第一部分内容 -->
	<div class="content clearFirx">
        <!-- 第一部分左侧内容 -->
		<div class="float_l aside-l">
			<div class="aside-title-box">
				<p class="aside-title" style="font-weight: bold;">捡漏</p>
			</div>
			<ul class="xinxiliebiao">
				<c:forEach items="${usedGoodsList}" var="usedGoodsList"
					varStatus="i">
					<c:choose>
						<c:when test="${i.index < 3 }">
							<li class="clearFirx">
								<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId=${usedGoodsList.goodsId}">
									<div class="float_l cont1-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage=${usedGoodsList.goodsThums});">
									</div>
									<div class="cong1_l_text float_r">
										<p style="font-weight: bold; font-size: 14px">${usedGoodsList.goodsName}</p>
										<p style="font-size: 12px">${usedGoodsList.goodsIntro}</p>
									</div>
								</a>
							</li>
						</c:when>
					</c:choose>
				</c:forEach>
			</ul>
		</div>
        <!-- 第一部分右侧内容 -->
		<div class="float_r aside-r">
			<div class="aside-title-box">
				<p class="aside-title" style="font-weight: bold;">热卖</p>
			</div>
			<ul class="xinxiliebiao">
				<c:forEach items="${newGoodsList}" var="newGoodsList" varStatus="i">
					<c:choose>
						<c:when test="${i.index < 3 }">
							<li class="clearFirx"><a
								href="<%=basePath%>app/toGoodsInfo?goodsId=${newGoodsList.goodsId}">
									<div class="float_l cont1-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage=${newGoodsList.goodsThums});">
									</div>
									<div class="cong1_l_text float_r">
										<p style="font-weight: bold; font-size: 14px">${newGoodsList.goodsName}</p>
										<p style="font-size: 12px">${newGoodsList.goodsIntro}</p>
									</div>
							</a></li>
						</c:when>
					</c:choose>
				</c:forEach>
			</ul>

		</div>
	</div>
    <!-- 第二部分内容 -->
	<div class="cont2">
		<div class="cont2_title_box border-bottom-1">
			<p class="cont2_title" style="font-weight: bold;">优选好物</p>
		</div>
		<ul class="cont2_cont">
			<c:forEach items="${goodsList}" var="goodsList">
				<c:choose>
					<c:when test="${goodsList.goodsIdentifying == 2 || goodsList.goodsIdentifying == 3}">
						<li class="clearFirx">
							<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId=${goodsList.goodsId}">
								<div class="float_l cont2-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage=${goodsList.goodsThums});">
								</div>
								<div class="cont2_cont_text float_l">
									<h3 style="font-weight: bold;">${goodsList.goodsName}</h3>
									<p class='cont2_cont_text_jiequ'>${goodsList.goodsIntro}</p>
									<div class="cont2-price">
										<span><i class="fa fa-rmb" style="font-size:0.2rem"></i> <i>${goodsList.goodsPrice}</i></span>
										<p class="liulanliang"
											style="width: 45%; float: right; text-align: right;color: #9e8686">浏览量
											${goodsList.pageView}</p>
									</div>
								</div>
						</a></li>
					</c:when>
					<c:otherwise>
						<li class="clearFirx">
							<a href="<%=basePath%>app/toGoodsInfo?goodsId=${goodsList.goodsId}">
								<div class="float_l cont2-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage=${goodsList.goodsThums});">
								</div>
								<div class="cont2_cont_text float_l">
									<h3 style="font-weight: bold; font-size: 14px">${goodsList.goodsName}</h3>
									<p class='cont2_cont_text_jiequ'>${goodsList.goodsIntro}</p>
									<div class="cont2-price">
										<span><i class="fa fa-rmb" style="font-size:0.2rem"></i> <i>${goodsList.goodsPrice}</i></span>
										<p class="liulanliang"
											style="width: 45%; float: right; text-align: right;color: #9e8686">浏览量
											${goodsList.pageView}</p>
									</div>
								</div>
						</a></li>
					</c:otherwise>
				</c:choose>
			</c:forEach>
		</ul>
	</div>
	
    <%@ include file="footer.jsp"%>

	<script>
	
		$(function() {
			
			$('.nav_fenye ul').find('li').each(function() {
				$(this).find('a img').height($(this).find('a img').width());
			});
	
			$('.xinxiliebiao').find('li').each(function() {
				$(this).find('a img').height($(this).find('a img').width() * 0.9);
			});
	
			$('.cont2_cont').find('li').each(function() {
				$(this).find('a img').height($(this).find('a img').width() * 0.9);
			});
	
			$('.navPOS').find('li').each(function() {
				$(this).find('a img').height($(this).find('a img').width());
			});
	
			$('.cont2_cont').find('li').each(function() {
				var text = $(this).find('.cont2_cont_text_jiequ');
				text.text(showText(text.text(), 70))
	
			})
	
		})
		
		function showText(str, len) { 
			//length属性读出来的汉字长度为1 
		   	if(str.length*2 <= len) { 
		     	return str; 
		   	} 
		   	var strlen = 0; 
		   	var s = ""; 
		   	for(var i = 0;i < str.length; i++) {
	     		s = s + str.charAt(i); 
		     	if (str.charCodeAt(i) > 128) {
		       		strlen = strlen + 2; 
			       	if(strlen >= len){
			         	return s.substring(0,s.length-1) + "..."; 
			       	}
		     	} else {
		       		strlen = strlen + 1; 
		      		if(strlen >= len){
		         		return s.substring(0,s.length-2) + "..."; 
		       		}
	     		}
		   }
		   return s; 
		 }
		
// 		function showText(text, numSub) {
// 			if (text == null) {
	
// 				return "";
// 			}
			
// 			var l = text.length;
// 			var blen = 0;
// 			for(i=0; i<l; i++) {
// 				if ((text.charCodeAt(i) & 0xff00) != 0) {
// 					blen ++;
// 				}
// 				blen ++;
// 			}
			
// 			if (blen > numSub) {
	
// 				return text.substring(0, numSub) + "...";
// 			}
// 			return text;
// 		}
	
		//轮播时长设置
		var shufflingTime = '${shufflingInstallInfo.time}' * 2000;
		var mySwiper = new Swiper('.swiper-container', {
			pagination : '.pagination',
			paginationClickable : true,
			spaceBetween : 30,
			centeredSlides : true,
			autoplay : shufflingTime,
			autoplayDisableOnInteraction : false
		})
	
		var geting = false;//是否加载信息，默认为false
	    var currentPage = 1;//当前页
	    var pageSize = 10;//每页数据数
	    $(window).scroll(function () {
	        if (geting) {
	            return;
	        }
	        var scrollTop = $(this).scrollTop();
	        var scrollHeight = $(document).height();
	        var windowHeight = $(this).height();
	        if (scrollTop + windowHeight == scrollHeight) {
	        	currentPage++;
	            getData();
	        }
	    });
	    function getData() {
	    	geting = true;
	    	$.ajax({
				url : "<%=basePath%>app/getIndexGoodsList",
				async:false,
				dataType : "json",
				type : "post",
				data : {
					"currentPage" : currentPage,
					"pageSize" : pageSize
				},
				success : function(data) {
					$.each(data, function (i, item) {
						var html = '<li class="clearFirx">';
								if(item.goodsIdentifying == 2 || item.goodsIdentifying == 3){
									html += '<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId='+item.goodsId+'">';
								}else{
									html += '<a href="<%=basePath%>app/toGoodsInfo?goodsId='+item.goodsId+'">';
								}
								html += '<div class="float_l cont2-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.goodsThums+');"></div>'+
								'<div class="cont2_cont_text float_l">'+
									'<h3 style="font-weight: bold;">'+item.goodsName+'</h3>'+
									'<p class="cont2_cont_text_jiequ">'+item.goodsIntro+'</p>'+
									'<div class="cont2-price">'+
										'<span><i class="fa fa-rmb" style="font-size:0.2rem"></i> <i>'+item.goodsPrice+'</i></span>'+
										'<p class="liulanliang" style="width: 45%; float: right; text-align: right;color: #9e8686">浏览量'+item.pageView+'</p>'+
									'</div>'+
								'</div>'+
							'</a>'+
						'</li>';
						$(".cont2_cont").append(html)
						geting = false;
						$('.cont2_cont').find('li').each(function() {
							var text = $(this).find('.cont2_cont_text_jiequ');
							text.text(showText(text.text(), 70))
				
						})
					})
				},
				error : function(data) {
					alert("网络错误");
				}
			})
	    }
	</script>
</body>
</html>